<template>
	<div class="list" ref="wrapper">
		<div>	<!-- 按照 better-scroll 插件要求格式需要加一层容器包裹 -->	
			<div class="area">
				<div class="title border-topbottom">当前城市</div>
				<div class="button-list">
					<div class="button-warpper">
						<div class="button">{{this.currentCity}}</div>
					</div>
				</div>
			</div>

			<div class="area">
				<div class="title border-topbottom">热门城市</div>
				<div class="button-list">
					<div 
					class="button-warpper" 
					v-for="item in hotCities" :key="hotCities.id"
					@click="handleCityClick(item.name)">
						<div class="button">{{item.name}}</div>
					</div>
				</div>
			</div>

			<div class="area" v-for="(item1,key) in cities" :key="key" :ref="key">
				<div class="title border-topbottom">{{key}}</div>
				<div class="item-list" v-for="item2 in item1" :key="item2.id">
					<div class="item border-bottom" @click="handleCityClick(item2.name)">{{item2.name}}</div>			
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'	
import {mapState} from 'vuex'	
	export default{
		name :"CityList",
		data(){
			return{

			}
		},
		computed:{
			...mapState({
				currentCity:'city'
			})
		},
		props:{
			cities:Object,
			hotCities:Array,
			letter:String
		},
		mounted(){
			this.scroll=new BScroll(this.$refs.wrapper)
		},
		watch:{
			letter(){
				if(this.letter){
					const element=this.$refs[this.letter][0]
					this.scroll.scrollToElement(element)			//better-scroll插件 自己的方法 需要传一个元素，或元素选择器
				}
			}
		},
		methods:{
			handleCityClick(city){
				this.$store.dispatch('changeCity',city)
				this.$router.push('/')
			}
		}
	}
</script>

<style lang="stylus" scoped="">
	@import "~styles/varibles.styl"
	.border-topbottom
		&:before
			border-color #ccc
		&:after
			border-color #ccc
	.border-bottom
		&:before
			border-color #ccc
	.list											//为使用 滚动插件 需要设置整个list区域不滚动
		position absolute				
		top 1.58rem
		left 0
		right 0
		bottom 0
		overflow hidden
		.title
			line-height .54rem
			background #eee
			padding-left .2rem
			color #666
			font-size .26rem
		.button-list
			padding .1rem .6rem .1rem .1rem
			overflow hidden					//下面有浮动 应在父级设置 overflow 触发 BFC
			.button-warpper
				width 33.33%
				float left
				.button
					padding .1rem 0
					text-align center
					margin .1rem
					border .02rem solid #ccc
					border-radius .06rem
		.item-list
			.item
				line-height .76rem
				padding-left .2rem
</style>